<template>
	<view class="ocr-photograph-panel">
		<camera class="ocr-photograph-camera" :flash="isTorchOn ? 'torch' : 'off'">
			<cover-view class="ocr-photograph-selection-box">
				<cover-view :class="'ocr-photograph-selection-area vertical ocr-photograph-selection-area-' + theme">
					<cover-view :class="'ocr-photograph-bar ocr-photograph-bar-' + theme" v-if="isAutoMode" :animation="barMove" @transitionend="reAnimation"></cover-view>
					<cover-view v-if="(category === 'ID_CARD' && side === 'FRONT') || category === 'ID_CARD_FRONT'" style="margin-top: 30rpx; margin-left: 320rpx">
						<cover-image src="https://beta.gtimg.com/GodIdent/huiyan/img/ico-head.png" style="width: 140px; height: 157px"></cover-image>
					</cover-view>
					<cover-view v-if="(category === 'ID_CARD' && side === 'BACK') || category === 'ID_CARD_BACK'" style="margin-top: 20rpx; margin-left: 10rpx">
						<cover-image src="https://beta.gtimg.com/GodIdent/huiyan/img/ico-guohui.png" style="width: 76px; height: 79px"></cover-image>
					</cover-view>
				</cover-view>

				<cover-view class="ocr-photograph-tips">
					<cover-image class="icon" src="https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/warning.png" />
					<cover-view class="text">证件请避免折角、遮挡和反光</cover-view>
				</cover-view>

				<cover-view class="ocr-photograph-btns">
					<cover-image
						v-if="!disableAlbum"
						class="ocr-photograph-pictuer-btn"
						src="https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/chooseImg.png"
						@tap="chooseImage"
					/>
					<cover-image
						v-if="!isAutoMode"
						:class="'ocr-photograph-take-btn ocr-photograph-take-btn-' + theme"
						:src="
							theme === 'native'
								? 'https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/takePicNative.png'
								: 'https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/takePicPrimary.png'
						"
						@tap="takeImage"
					></cover-image>
					<cover-image
						class="ocr-photograph-flash-btn"
						:src="
							isTorchOn ? 'https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/flashOn.png' : 'https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/flashOff.png'
						"
						@tap="toggleTorch"
					></cover-image>
				</cover-view>
			</cover-view>
		</camera>
	</view>
</template>

<script>
const { isStable } = require('./utils');
const compareVersion = require('./compareVersion');
export default {
	data() {
		return {
			isAutoMode: false,
			maxTry: 3,
			autoCount: 0,
			isGyroscopeOn: false,
			isTorchOn: false,
			disableAlbum: false,
			category: '',
			barMove: ''
		};
	},
	props: {
		side: {
			type: String
		}
	},
	created() {
		const { theme, cameraConfig, ocrType } = uni.clientInfo;
		const currentVersion = uni.getSystemInfoSync().SDKVersion;
		const supportAutoMode = compareVersion(currentVersion, '2.12.2') >= 0;
		const isAutoMode = !!(supportAutoMode && cameraConfig && cameraConfig.autoMode);
		const maxTry = cameraConfig && cameraConfig.maxTry ? cameraConfig.maxTry : 3;
		const disableAlbum = !!(cameraConfig && cameraConfig.disableAlbum);
		this.theme = theme;
		this.isAutoMode = isAutoMode;
		this.maxTry = maxTry;
		this.disableAlbum = disableAlbum;
		this.category = ocrType;
		setTimeout(() => {
			this.startAuto();
			if (isAutoMode) {
				this.barDown = true;
				this.barAnimation = uni.createAnimation({
					duration: 1500,
					delay: 0,
					timingFunction: 'linear'
				});
				this.reAnimation();
			}
		}, 2000);
	},
	destroyed() {
		this.isTorchOn = false;
		this.endAuto();
	},
	methods: {
		/* 自动识别模式下的动画效果 */
		reAnimation() {
			const curBarDown = this.barDown;
			if (curBarDown) {
				this.barAnimation.translateY('390rpx').step();
				this.barDown = !curBarDown;
			} else {
				this.barAnimation.translateY(0).step();
				this.barDown = !curBarDown;
			}
			this.barMove = this.barAnimation.export();
		},

		/* 打开陀螺仪，开始自动识别 */
		startAuto() {
			const self = this;
			const { isAutoMode, maxTry, autoCount } = self;
			if (!isAutoMode) {
				return;
			}
			if (autoCount >= maxTry) {
				uni.showModal({
					title: '提示',
					content: '未能识别到，是否切换到拍照模式？',
					confirmText: '切换模式',
					success(res) {
						if (res.confirm) {
							self.isAutoMode = false;
						} else {
							if (res.cancel) {
								self.restartAuto();
							}
						}
					}
				});
				return;
			}

			uni.startGyroscope({
				success: () => {
					self.isGyroscopeOn = true;
				}
			});
			uni.onGyroscopeChange(res => {
				self.autoTake(res);
			});
		},

		/* 自动拍摄 */
		async autoTake(res) {
			const { autoCount } = this;
			if (isStable(res)) {
				this.endAuto();
				this.autoCount++;
				this.takeImage();
			}
		},

		/* 关闭陀螺仪 */
		endAuto() {
			const { isGyroscopeOn } = this;

			if (isGyroscopeOn) {
				uni.offGyroscopeChange();
				uni.stopGyroscope({
					success: () => {
						this.isGyroscopeOn = false;
					}
				});
			}
		},

		/* 重启自动模式 */
		restartAuto() {
			this.autoCount = 0;
			setTimeout(() => {
				this.startAuto();
			}, 2000);
		},

		/* 从相册选择照片 */
		chooseImage() {
			this.endAuto();
			this.isAutoMode = false;
			const { side } = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album'],
				success: res => {
					const detail = {
						filePath: res.tempFilePaths[0],
						side
					};
					this.$emit('onImageReady', {
						detail: detail
					});
				}
			});
		},

		/* 拍摄照片 */
		takeImage() {
			const { side } = this;
			const { isAutoMode } = this;
			const ctx = uni.createCameraContext();
			ctx.takePhoto({
				quality: 'normal',
				success: res => {
					/* 通知页面图片已准备好 */
					const detail = {
						filePath: res.tempImagePath,
						side,
						isAuto: isAutoMode
					};
					this.$emit('onImageReady', {
						detail: detail
					});
				}
			});
		},

		/* 手电筒开关 */
		toggleTorch() {
			if (uni.canIUse('camera.flash.torch')) {
				const { isTorchOn } = this;
				this.isTorchOn = !this.isTorchOn;
			} else {
				uni.showToast({
					title: '该版本暂时不支持手电筒功能',
					icon: 'none',
					duration: 3000
				});
			}
		}
	}
};
</script>
<style>
/* page{
  height:100%;
} */
.ocr-photograph-panel {
	position: relative;
	height: 100%;
	width: 100%;
	/* background-size:cover;
  background-image: url("https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/camera-bg.png"); */
}

.ocr-photograph-mask {
	z-index: 2;
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
}

.ocr-photograph-mask-top {
	top: 0;
	width: 100%;
	height: 236rpx;
}

.ocr-photograph-mask-bottom {
	bottom: 0;
	width: 100%;
	height: calc(100% - 626rpx);
}

.ocr-photograph-mask-left {
	top: 236rpx;
	left: 0;
	width: calc(50% - 300rpx);
	height: 390rpx;
}

.ocr-photograph-mask-right {
	top: 236rpx;
	right: 0;
	width: calc(50% - 300rpx);
	height: 390rpx;
}

.ocr-photograph-camera,
.ocr-photograph-selection-box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.ocr-photograph-camera {
	z-index: 1;
}
.ocr-photograph-selection-box {
	z-index: 2;
}

.ocr-photograph-selection-area {
	border: solid 1px#006EFF;
	position: relative;
	/* box-shadow:0 0 0 9999px rgba(0, 0, 0, .8); */
}

.ocr-photograph-selection-area-primary {
	border-color: #006eff;
}

.ocr-photograph-selection-area-native {
	border-color: #07c160;
}

.ocr-photograph-selection-area.vertical {
	width: 600rpx;
	height: 390rpx;
	margin: 236rpx auto 40rpx auto;
}
.ocr-photograph-selection-area.horizontal {
	width: 520rpx;
	height: 720rpx;
	margin: 80rpx auto 40rpx auto;
}

.ocr-photograph-selection-area .border-top-left,
.ocr-photograph-selection-area .border-top-right,
.ocr-photograph-selection-area .border-bottom-left,
.ocr-photograph-selection-area .border-bottom-right {
	border-width: 6rpx;
	border-color: #006eff;
	position: absolute;
	width: 52rpx;
	height: 52rpx;
}
.ocr-photograph-selection-area .border-bottom-left,
.ocr-photograph-selection-area .border-bottom-right {
	border-bottom-style: solid;
	bottom: 0;
}
.ocr-photograph-selection-area .border-top-left,
.ocr-photograph-selection-area .border-top-right {
	border-top-style: solid;
	top: 0;
}

.ocr-photograph-selection-area .border-top-left,
.ocr-photograph-selection-area .border-bottom-left {
	left: 0;
}
.ocr-photograph-selection-area .border-top-right,
.ocr-photograph-selection-area .border-bottom-right {
	right: 0;
}

.ocr-photograph-selection-area .border-top-left,
.ocr-photograph-selection-area .border-bottom-left {
	border-left-style: solid;
}
.ocr-photograph-selection-area .border-top-right,
.ocr-photograph-selection-area .border-bottom-right {
	border-right-style: solid;
}

.ocr-photograph-selection-area .primary {
	border-color: #006eff;
}

.ocr-photograph-selection-area .native {
	border-color: #07c160;
}

.ocr-photograph-top-warning {
	z-index: 3;
	position: absolute;
	left: 0;
	right: 0;
	height: 96rpx;
	box-sizing: border-box;
	padding: 0 32rpx;
	background-color: #fff2f1;
}
.ocr-photograph-top-warning .text {
	font-size: 32rpx;
	color: #a8002d;
}
.ocr-photograph-top-warning .text,
.ocr-photograph-top-warning::before,
.ocr-photograph-top-warning::after {
	display: inline-block;
	vertical-align: middle;
}
.ocr-photograph-top-warning::before {
	content: '';
	width: 24px;
	height: 24px;
	margin-right: 16rpx;
	background-image: url('https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/warning.svg');
}
.ocr-photograph-top-warning::after {
	content: '';
	width: 0;
	height: 100%;
}

.ocr-photograph-tips {
	border: 1px solid rgba(232, 232, 232, 0.28);
	width: 600rpx;
	height: 100rpx;
	margin: 0 auto;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.28);
	position: relative;
	z-index: 4;
}
.ocr-photograph-tips .text {
	font-size: 16px;
	color: #ffffff;
}
.ocr-photograph-tips .icon {
	height: 28px;
	width: 28px;
	margin-bottom: -5px;
	margin-right: 20rpx;
}

.ocr-photograph-btns {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 52rpx;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ocr-photograph-pictuer-btn {
	width: 82rpx;
	height: 82rpx;
	margin: 0 40rpx;
	background-size: 100% 100%;
}
.ocr-photograph-take-btn {
	width: 160rpx;
	height: 160rpx;
	background-size: 100% 100%;
	margin: 0 40rpx;
	background-image: url('https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/takePicPrimary.svg');
}
.ocr-photograph-take-btn-primary {
	background-image: url('https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/takePicPrimary.svg');
}
.ocr-photograph-flash-btn {
	width: 82rpx;
	height: 82rpx;
	margin: 0 40rpx;
	background-size: 100% 100%;
}

.ocr-photograph-bar {
	width: 100%;
	height: 6rpx;
	position: absolute;
	top: 0;
	opacity: 0.8;
}

.ocr-photograph-bar-primary {
	background-color: #006eff;
}

.ocr-photograph-bar-native {
	background-color: #07c160;
}
</style>
